<template>
    <div>
    <div class="wrap">
        <ul v-bind="{style:'width:'+ulWidth}" class="title">
            <li @click="refresh(0)">全部分类</li>
            <li v-for="e in cates" @click="refresh(e.id)">
                {{e.title}}
            </li>
        </ul>
    </div>
    <ul class="image">
        <router-link v-for="item in list" v-bind="{to:'/photo/photoinfo/'+item.id}">
            <img v-lazy="item.img_url" >
            <h3 v-text="item.title"></h3>
            <div v-text="item.zhaiyao"></div>
        </router-link>
    </ul>
    </div>
</template>

<script type='es6'>

    import { Lazyload } from 'mint-ui';

    export default {
        data(){
            return{
                cates:[],
                ulWidth : '320px',
                list:[]
            }
        },
        created(){
            this.getData()
            this.getImage()
        },
        methods:{
            getData(){
                var url = 'http://vue.studyit.io/api/getimgcategory'
                this.$http.get(url).then(function(data){
                   // console.log(data);
                    this.cates = data.body.message
                    this.ulWidth = (data.body.message.length )* 80 + 'px'
                })
            },
            getImage(num){
                var num = num || 0
                var url = 'http://vue.studyit.io/api/getimages/'+ num
                this.$http.get(url).then(function(data){
                    //console.log(data);
                    this.list = data.body.message
                    //console.log(this.list);
                })
            },
            refresh(id){
                this.getImage(id)
            }
        }
    }
</script>

<style scoped>
    .wrap{
        width: 100%;
        list-style: none;
        max-width: 640px;
        height: 50px;
        margin: 0px;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .wrap .title{
        width: 100px;
        padding-left: 10px;
    }
    .wrap .title li{
        display: inline-block;
        padding: 0 10px;
        color: #0094ff;
    }



    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>  